@media all and (min-width: 1220px) {
    div.pro {
        background-color: #efefef;
        height: 972px;
        width: 100%;
    }

    div.pro > div.pro-content {
        width: 1100px;
        height: 972px;
        margin: 0 auto;
        position: relative;
        text-align: center;
        padding-top: 70px;
    }

    div.pro > div.pro-content .pro-title {
        font-size: 44px;
        color: black;
        letter-spacing: 0.5rem;
    }

    div.pro > div.pro-content .list-container {
        margin-top: 70px;
        width: 100%;
        height: auto;
    }

    div.pro > div.pro-content .list {
        float: left;
        height: 114px;
        width: 510px;
        text-align: left;
        margin-left: 30px;
        margin-top: 40px;
    }

    div.pro > div.pro-content .list img {
        width: 114px;
        height: 114px;
        border-radius: 30px;
    }

    div.pro > div.pro-content .list .list-info {
        text-align: left;
        float: right;
        width: 360px;
        height: 85px;
    }

    div.pro > div.pro-content .info-title {
        color : #337ab7;
        font-size: 30px;
    }

    div.pro > div.pro-content .list .info-content {
        font-size: 24px;
        width: 360px;
        color: grey;
    }
}

@media all and (max-width : 1219px) {
    div.pro {
        background-color: #efefef;
        width: 100%;
    }

    div.pro > div.pro-content {
        width: 100%;
        margin: 0 auto;
        position: relative;
        text-align: center;
        padding-top: 1rem;
    }

    div.pro > div.pro-content .pro-title {
        font-size: 3rem;
        color: black;
        letter-spacing: 0.5rem;
    }

    div.pro > div.pro-content .list-container {
        width: 100%;
        overflow: hidden;
        zoom : 1;
        padding: 3rem 1rem;
    }

    div.pro > div.pro-content .list {
        float: left;
        height: 11.4rem;
        width: 100%;
        text-align: left;
        font-size : 2rem;
        margin-bottom : 3rem;
    }

    div.pro > div.pro-content .list img {
        position: relative;
        top : 1rem;
        width: 9.4rem;
        float : left;
        height: 9.4rem;
        border-radius: 3rem;
        padding: 1rem;
        vertical-align: middle;
    }

    div.pro > div.pro-content .list .list-info {
        text-align: left;
        float: left;
        width: 70%;
        height: 8.5rem;
        padding: 1rem;
    }

    div.pro > div.pro-content .info-title {
        color : #337ab7;
    }

    div.pro > div.pro-content .list .info-content {
        color: grey;
    }
}